<template>
	<view>
		<view class="view3">
			<uni-card style="margin-top: 100rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;">
						<view>
							<image :src="user.avatar!=''?baseUrl+user.avatar:'../../static/yonghu.png'" class="tx"></image>
						</view>
						<view style="margin-left: 30rpx;">
							<view style="font-size: 26rpx;font-weight: 700;">{{user.nickName}}</view>
							<view style="font-size: 26rpx;">{{schoolname}}</view>
							<view style="font-size: 26rpx;">粉丝数:{{follow}}</view>
						</view>
					</view>
					<view>
						<button type="primary" size="mini" @click="add" v-show="show">+关注</button>
						<button type="warn" size="mini" @click="canceladd" v-show="show1">取消关注</button>
					</view>
				</view>
			</uni-card>
			<uni-segmented-control styleType="text" :values="type" activeColor="#FF4500"
				@clickItem="change"></uni-segmented-control>
		</view>
		<view v-show="typeid==0">
			<uni-search-bar placeholder="请输入商品名称" @confirm="search"></uni-search-bar>
			<view class="cardview" @click="go(i.id,i.userid)" v-for="i in productList">
				<image :src="i.img[0]" class="img1"></image>
				<view class="titleview">{{i.title}}</view>
				<view>
					<text style="font-size: 26rpx;color: red;font-weight: 700;">￥</text>
					<text style="font-size: 40rpx;color: red;font-weight: 700;">{{i.price}}</text>
				</view>
				<view class="view2">
					<image :src="baseUrl+i.user.avatar" class="img2"></image>
					<view class="name1">{{i.user.nickName}}</view>
				</view>
				<view class="date">发布日期:{{i.createDate}}</view>
			</view>
		</view>
		<view v-show="typeid==1">
			<uni-card @click="onClick(i)" :title="i.title" :sub-title="'发布日期:'+i.createtime" v-for="i in postbarList">
				<image slot='cover' :src="image" v-for="image in i.imageList.slice(0,3)"
					:class="i.imageList.length==1?'image1':(i.imageList.length==2?'image2':'image3')"
					@click="onClick(i)"></image>
				<view class="view1">{{i.content}}</view>
				<view style="height: 60rpx;margin-top: 20rpx;">
					<button type="primary" size="mini" style="float: right;" @click.stop="remove(i)" v-show="removeshow">删除</button>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		addfollow,
		addschoolname,
		removefollow,
		removepostbar1,
		selectinfo,
		selectjudgefollow,
		selectlist,
		selectpostbarlist,
		selectproductlist,
		selectschoollist,
		selectschoolname
	} from '../../api/myapi'
	import config from '@/config'
	export default {
		data() {
			return {
				productList: [],
				baseUrl: config.baseUrl,
				user: {},
				schoolname: '',
				userid: '',
				follow: 0,
				type: ["店家商品", "他的帖子"],
				typeid: 0,
				show: true,
				show1: false,
				removeshow:false,
				postbarList: []
			}
		},
		methods: {
			async remove(i) {
				console.log(i);

				this.$modal.confirm("确定删除此条帖子吗").then(async (r) => {
					if (r) {
						let n = await removepostbar1({
							id: i.id
						})
						this.selectpostbar()
					}
				})
			},
			change(i) {
				console.log(i);
				this.typeid = i.currentIndex
			},
			async search(i) {
				let r = await selectproductlist({
					userid: this.userid,
					title: i.value
				})
				console.log(r);
				this.productList = r.data
			},
			go(i, userid) {
				console.log(i);
				this.$tab.navigateTo('/pages/xz/detail?id=' + i + "&userid=" + userid)
			},
			async add() {
				let r = await addfollow({
					userid: uni.getStorageSync('userid'),
					followuserid: this.userid
				})
				console.log(r);
				this.$modal.msg(r.msg)
				this.selectfollow()
			},
			async selectfollow() {
				let r = await selectjudgefollow({
					followid: this.userid,
					userid: uni.getStorageSync('userid')
				})
				console.log(r);
				if (r.data != null) {
					this.show1 = true
					this.show = false
				} else {
					this.show = true
					this.show1 = false
				}
			},
			async canceladd() {
				let r = await removefollow({
					userid: uni.getStorageSync('userid'),
					followuserid: this.userid
				})
				console.log(r);
				this.$modal.msg(r.msg)
				this.selectfollow()

			},
			async selectpostbar() {
				let r = await selectpostbarlist({
					userid: this.userid
				})
				console.log(r);
				this.postbarList = r.data
			},
			onClick(i) {
				console.log(i);
				uni.navigateTo({
					url: '../postbar/detail?id=' + i.id
				})
			}
		},
		async onLoad(i) {
			uni.showLoading({
				title: "正在加载"
			})
			this.userid = i.userid
			if (this.userid == uni.getStorageSync('userid')) {
				this.show = false
				this.removeshow = true
			} else {
				this.selectfollow()
			}
			let {
				data: res1
			} = await selectproductlist({
				userid: i.userid
			})
			console.log(res1);
			this.productList = res1
			let r = await selectinfo({
				id: this.userid
			})
			console.log(r);
			this.user = r.data
			let r1 = await selectschoolname({
				id: i.userid
			})
			this.schoolname = r1.data.userSchool
			let n = await selectlist({
				id: this.userid
			})
			console.log(n);
			this.follow = n.data.length
			this.selectpostbar()
			uni.hideLoading()
		},
		async onShow() {
			uni.showLoading({
				title: "正在加载"
			})
			let {
				data: res1
			} = await selectproductlist({
				userid: this.userid
			})
			this.productList = res1
			let r = await selectinfo({
				id: this.userid
			})
			this.user = r.data
			uni.hideLoading()
		}
	}
</script>

<style>
	.view3 {
		background: url(../../static/bjtp.jpg);
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.tx {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1rpx solid #c0c0c0;
	}

	.bjtp {
		width: 100%;
	}

	.titleview {
		font-size: 30rpx;
		font-family: '幼圆';
		font-weight: 700;
		height: 94rpx;
		overflow: hidden;
	}

	.cardview {
		width: 47%;
		height: 550rpx;
		box-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, .3);
		margin-left: 13rpx;
		margin-top: 10rpx;
		float: left;
		padding: 10rpx;
		border-radius: 8rpx;
		background-color: white;
	}

	.img2 {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		background-color: #c0c0c0;
		margin-top: 10rpx;
	}

	.img1 {
		width: 100%;
		height: 300rpx;
	}

	.date {
		font-size: 14rpx;
		color: #c0c0c0;
		margin-top: 10rpx;
	}

	.name1 {
		font-size: 26rpx;
		font-family: '幼圆';
		margin-left: 10rpx;
	}

	.view2 {
		display: flex;
		align-items: center;
	}

	.view1 {
		height: 78rpx;
		overflow: hidden;

	}

	.image1 {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 16rpx;
		height: 300rpx;
	}

	.image2 {
		width: 47%;
		margin-top: 20rpx;
		border-radius: 16rpx;
		height: 300rpx;
		margin-left: 14rpx;
		border: 1rpx solid #dcdcdc;
	}

	.image3 {
		width: 30%;
		margin-top: 20rpx;
		border-radius: 16rpx;
		height: 200rpx;
		margin-left: 18rpx;
		border: 1rpx solid #dcdcdc;
	}
</style>